<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评分星星</title>
    <style>
        .star-rating {
            display: flex;
            float: left;
            flex-direction: row-reverse;
        }

        input {
            box-sizing: content-box;
            margin: 0;
            padding: 0 5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 30px;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
            transition: all 300ms;
        }

        input::after {
            color: #66f;
            content: "☆";
        }

        input:hover {
            transform: scale(1.2);
        }

        input:hover::after {
            color: #f66;
            content: "★";
        }

        input:checked::after,
        input:checked~input::after,
        input:hover::after,
        input:hover~input::after {
            color: #f66;
            content: "★";
        }

        /* 把星星反向排列 */


        /* .star-rating input::after {
            color: #66f;
            content: "☆";
            transition: all 300ms;
        } */

        /* 兄弟元素操作 */
        /* .star-rating input:checked::after,
        .star-rating input:checked~input::after,
        .star-rating input:hover::after,
        .star-rating input:hover~input::after {
            color: #f66;
            content: "★";
        } */
    </style>
</head>

<body>
    <div class="bruce flex-ct-x">
        <div class="star-rating">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
            <input type="radio" name="rate">
        </div>
    </div>
</body>

</html>